<template>
	<!-- 引导页 -->
	<view id="guide">
		<swiper
			:indicator-dots="current !== guide.length - 1"
			active-class="swiper-item-active"
			@animationfinish="animationfinish"
			indicator-color="rgba(244, 92, 75, 0.3)"
			duration="100"
			easing-function="easeInOutCubic"
			indicator-active-color="linear-gradient(to right, #fc7767 0%, #ec412f 100%)"
		>
			<swiper-item v-for="(item, index) in guide" :key="item.title">
				<view ref="swiperItem" :class="swiperItemClass[index]">
					<view class="title">{{item.title}}</view>
					<view class="content">{{item.content}}</view>
					<image :src="item.image" mode="aspectFit"></image>
					<button v-show="index === 2" type="default" @click="jump">立即体验</button>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			swiperItemClass: [['swiper-item', 'swiper-item-animation'], ['swiper-item'], ['swiper-item']]
		};
	},
	methods: {
		jump() {
			uni.setStorage({
				key: 'isFirstOpen',
				data: true
			});
			const noviceData={home:false,answer:false,daily:false}
			uni.setStorageSync('isNovice',JSON.stringify(noviceData));
			uni.reLaunch({
				url: '../login/login'
			});
		},
		animationfinish(current) {
			this.current = current.detail.current;
			!this.swiperItemClass[this.current].includes('swiper-item-animation') && this.swiperItemClass[this.current].push('swiper-item-animation');
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style scoped lang="scss">
#guide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	// padding-top: 146upx;
	padding-bottom: 100upx;
}
// .swiper-item-first {
// 	image {
// 		animation-delay: 1s;
// 	}
// 	.title {
// 		animation-delay: 1.4s;
// 	}
// 	.content {
// 		animation-delay: 1.8s;
// 	}
// }
.swiper-item-animation {
	* {
		animation: showGuide .4s ease-in-out;
		animation-fill-mode: forwards;
	}
}
.swiper-item {
	text-align: center;
	* {
		opacity: 0;
	}
	image {
		width: 583upx;
		height: 494upx;
		display: block;
		margin: auto;
		margin-top: 176upx;
	}
	.title {
		font-size: 42upx;
		font-weight: 500;
		margin-top: 146upx;
		margin-bottom: 40upx;
		// animation-delay: 0.2s;
		color: #f45c4b;
	}
	.content {
		font-size: 30upx;
		font-weight: 400;
		// animation-delay: 0.4s;
		color: #a68b8b;
	}
	button {
		width: 350upx;
		background: linear-gradient(to right, #fc7767 0%, #ec412f 100%);
		border-radius: 40upx;
		line-height: 80upx;
		font-size: 32upx;
		font-weight: 400;
		// margin-top: 80upx;
		// animation-delay: 0.6s;
		color: white;
		position: absolute;
		left: 50%;
		margin-left: -175upx;
		bottom:0;
	}
}
@keyframes showGuide {
	from {
		transform: translateX(500upx);
		opacity: 0;
	}
	to {
		transform: translateX(0upx);
		opacity: 1;
	}
}
uni-swiper {
	width: inherit;
	height: inherit;
	/deep/.uni-swiper-dot-active {
		width: 48upx !important;
		border-radius: 8upx!important;
	}
}

// .uni-swiper-dot {
// 	transition: width 0.2s ease-in-out !important;
// }

page {
	width: 100%;
	height: 100%;
}
</style>
